<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员管理</title>
    <link rel="stylesheet" href="../../style/member/index.css">
    <link rel="stylesheet" href="../../libs/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <script src="../../libs/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
    <script src="../../js/vue-2.6.12.js"></script>
    <script src="../../js/axios-0.21.0.js"></script>
    <script src="../../js/qs-6.9.4.js"></script>
    <script src="../../js/vue-router-3.4.9.js"></script>
</head>

<body>
    <div class="containers" id="app">
        <div class="containers-header">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">姓名</label>
                </div>
                <div class="col-auto">
                    <input type="text" id="inputPassword6" class="form-control"
                        aria-describedby="passwordHelpInline" placeholder="请输入姓名" v-model="realName">
                </div>
                <div class="col-auto">
                    <button class="btn btn-dark" @click="search">搜索</button>
                </div>
            </div>

            <a href="./addUser.html" type="button" class="btn btn-primary" target="tv">添加会员</a>
            <a type="button" class="btn btn-danger" @click="deletes">删除会员</a>

        </div>
        <!-- 内容展示区域 -->
        <div class="containers-connet">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><input type="checkbox" @click="changeCheckbox" :isChecked="isChecked"></th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>手机号</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>会员等级</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(m,i) in members" :key="m.memberId">
                        <td><input type="checkbox" name="mid" :value="m.memberId" v-model="ids"></td>
                        <td>{{m.realName}}</td>
                        <td>{{m.nickName}}</td>
                        <td>{{m.mobile}}</td>
                        <td>{{m.sex}}</td>
                        <td>{{m.age}}</td>
                        <td>VIP{{m.level}}</td>
                        <td>{{m.state==1?"正常":"冻结"}}</td>
                        <td>
                            <button type="button" class="btn btn-warning" v-show="m.state==1" @click="changeState(m.memberId,i,0)">冻结</button>
                            <button type="button" class="btn btn-warning" v-show="m.state==0" @click="changeState(m.memberId,i,1)">解冻</button>
                           <!-- <a href="../member/detailsMember.html" target="tv" type="button" class="btn btn-info ">详情</a>-->
                            <button type="button" class="btn btn-info" @click="toDetail(m.memberId)">详情</button>
                            <button type="button" class="btn btn-danger" @click="deleteMember(m.memberId,i)">删除</button>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="toUpdateMember(m)">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 分页组件 -->
            <div class="containers-connet-fonter">

                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
        <!-- 修改会员模态框 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">修改会员信息</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="add-ename">姓名:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="姓名" v-model="member.realName">
                            </div>
                            <div class="form-group">
                                <label for="add-ename">昵称:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="昵称" v-model="member.nickName">
                            </div>
                            <div class="form-group">
                                <label for="add-ename">手机号:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="手机号" v-model="member.mobile">
                            </div>
                            <div class="form-group">
                                <label for="">性别</label>
                                <select class="form-control" id="add-pid" style="width: 200px;" v-model="member.sex">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="add-ename">年龄:</label>
                                <input type="text" class="form-control" id="add-ename" placeholder="年龄"  v-model="member.age">
                            </div>
                            <div class="form-group">
                                <label for="">会员等级</label>
                                <select class="form-control" id="add-pid" style="width: 200px;" v-model="member.level">
                                    <option value="1">VIP1</option>
                                    <option value="2">VIP2</option>
                                    <option value="3">VIP3</option>
                                    <option value="4">VIP4</option>

                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="updateMember">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../libs/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
<script>

    /* 关闭按钮 */
   /* function btn() {
        /!*   let addename = document.getElementById("add-ename")
          console.log(addename.value); *!/
        let _exampleModal = document.getElementById("exampleModal")
        let _model = document.getElementsByClassName("modal-backdrop show")
        _exampleModal.style.display = "none";
        _model[0].style.opacity = "0"
        setTimeout(() => {
            window.location.reload()
        }, 2000);
    }*/
 const app=new Vue({
     el:"#app",
     data:{
         members:[],
         member:{},
         ids:[],
         isChecked:false,
         realName:"",
     },
     methods:{
         changeState(id,i,state){
             axios.get("/shop/member/changeState?id="+id+"&state="+state).then(res=>{
                 if(res.data){
                     alert(state==0?"冻结成功":"解冻成功")
                     this.members[i].state=state
                 }
             })
         },
         toDetail(id){
             location.href="/shop/views/member/detailsMember.html?memberId="+id;
         },
         toUpdateMember(m){
             this.member=m
         },
         updateMember(){
             axios.post("/shop/member/updateMember",Qs.stringify(this.member)).then(res=>{
                 if(res.data){
                     alert("修改成功")
                     let _exampleModal = document.getElementById("exampleModal")
                     let _model = document.getElementsByClassName("modal-backdrop show")
                     _exampleModal.style.display = "none";
                     _model[0].style.opacity = "0"
                     setTimeout(() => {
                         window.location.reload()
                     }, 2000);
         }}).catch(e=>{
             console.log(e)
             })
         },
         deleteMember(id,i){
             if(confirm("确定要删除吗？")) {
                 axios.get("/shop/member/deleteMember?memberId=" + id).then(res => {
                     if (res.data) {
                         alert("删除成功")
                         this.members.splice(i, 1)
                     }
                 }).catch(e => {
                     console.log(e)
                 })
             }
         },
         changeCheckbox(){
              this.isChecked=!this.isChecked
             if(this.isChecked){
                 for(let i=0;i<this.members.length;i++){
                     this.ids.push(this.members[i].memberId)
                 }
             }else{
                 this.ids=[]
             }
         },
         deletes(){
             axios.post("/shop/member/deletes",Qs.stringify({ids:this.ids},{arrayFormat:"repeat"})).then(res=>{
                 if(res.data){
                     alert("删除成功")
                  for (let i=0;i<this.ids.length;i++){
                      for(let j=0;j<this.members.length;j++){
                          if(this.ids[i]==this.members[j].memberId){
                              this.members.splice(j,1)
                          }
                      }
                  }
                 }
             }).catch(e=>{
                 console.log(e)
             })
         },
         search(){
             axios.get("/shop/member/search?realName="+this.realName).then(res=>{
                 this.members=res.data
             }).catch(e=>{
                 console.log(e)
         })
         }
     },
     created(){
        axios.get("/shop/member/queryMemberAll").then(res=>{
            this.members=res.data
        }).catch(e=>{
            console.log(e)
        })
     }
 })
</script>

</html>